<template>
  <div class="notice-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="便民门诊须知"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 须知内容 -->
    <div class="notice-content">
      <div class="notice-text">
        <h3>便民门诊就诊须知</h3>
        
        <p><strong>1、便民门诊就诊须知</strong>先挂号、再就诊。实名就诊，病员信息与就诊卡不符，不能开药开单。</p>
        
        <p><strong>2、便民门诊可开具临床医疗常规用药，</strong>如常规中成药、常规西药。根据药品管理规定，便民门诊不得开具以下药品：（1）血液制品如人血白蛋白、抗蛇毒血清、破伤风抗毒素针、破伤风免疫球蛋白、人乙肝免疫球蛋白；（2）麻醉药品、精神药品、毒性药品、抗菌药物、高警示药品；（3）各类静脉输液用药。如需开上述药品，请到相应专科就诊由专科医生评估后开具。</p>
        
        <p><strong>3、根据《处方管理办法》，</strong>处方开具当日有效；处方一般不得超过7日用量；对于某些慢性病、老年病或特殊情况，处方用量可适当延长，但医师应当注明理由。便民门诊不做病情、检验、检查结果的解释，不开具诊断证明书。</p>
        
        <p><strong>4、代开药需持开药患者本人和代开药人身份证件，</strong>并出示患者过往专科开药病历。</p>
        
        <p><strong>5、便民门诊仅开具以体检为目的的常规临床医疗化验检查申请单，</strong>如血、尿、便常规、乙肝三系、血生化、心电图、B超、X片、CT等，其他特殊大型检查请到专科开具。</p>
        
        <p><strong>6、工作时间：</strong>周一到周五：07：45-12：00，12：45-16：30，周六/周日：08:00-12:00节假日以医院公告为准。</p>
        
        <!-- 按钮区域移动到内容末尾 -->
        <div class="inline-buttons">
          <van-button
            type="default"
            size="large"
            block
            @click="viewHistory"
            class="history-btn"
          >
            查看开单记录
          </van-button>
          <van-button
            type="primary"
            size="large"
            block
            @click="agreeAndContinue"
            class="continue-btn"
          >
            同意并继续
          </van-button>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

/**
 * 自助开单须知页面组件
 * 显示自助开单的相关须知和注意事项
 */

const router = useRouter()

/**
 * 点击返回按钮
 */
const onClickLeft = () => {
  router.back()
}

/**
 * 查看开单记录
 */
const viewHistory = () => {
  router.push('/order-history')
}

/**
 * 同意须知并继续
 */
const agreeAndContinue = () => {
  Toast({
    message: '正在跳转到院区选择...',
    type: 'loading',
    duration: 1000
  })
  
  setTimeout(() => {
    router.push('/hospital-selection')
  }, 1000)
}
</script>

<style scoped>
.notice-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  /* 确保内容不会溢出手机屏幕 */
  max-width: 100%;
  box-sizing: border-box;
}

.notice-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.notice-text h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.notice-item {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notice-item p {
  line-height: 1.6;
  color: #666;
  margin: 4px 0;
  font-size: 14px;
}

.notice-item strong {
  color: #333;
  font-weight: 600;
}

.notice-item.important {
  border-left: 4px solid #ff6b6b;
  background: #fff5f5;
}

.notice-item.important p {
  color: #d63031;
}

/* 内联按钮样式 */
.inline-buttons {
  margin-top: 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-btn {
  border: 1px solid #1989fa;
  color: #1989fa;
  height: 40px;
  font-size: 14px;
  outline: none;
}

.continue-btn {
  background: #1989fa;
  border: none;
  color: #fff;
  height: 40px;
  font-size: 14px;
  outline: none;
}

/* 手机外框内适配 */
:deep(.van-nav-bar) {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #ebedf0;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .notice-content {
    padding: 12px;
  }
  
  .notice-item {
    padding: 10px;
    margin-bottom: 12px;
  }
  
  .notice-item p {
    font-size: 13px;
  }
  
  .inline-buttons {
    padding: 0;
    margin-top: 12px;
    gap: 8px;
  }
  
  .history-btn,
  .continue-btn {
    height: 36px;
    font-size: 13px;
    outline: none;
  }
  
  .continue-btn {
    border: none;
  }
}

/* 确保按钮不会溢出并移除白边 */
:deep(.van-button) {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  outline: none !important;
  border: none !important;
}

:deep(.van-button):focus,
:deep(.van-button):active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 为有边框的按钮重新设置边框 */
:deep(.van-button.history-btn) {
  border: 1px solid #1989fa !important;
}
</style>